<template>
  <div class="appCenter-aside">
    <div
      v-for="item in data"
      :key="item.id"
      class="appCenter-aside__item"
      :class="{ 'appCenter-aside__item--active': item.actived }"
      @click="handleClick(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, watch } from 'vue';
import type { AppGroupRecord } from '@/api/app-center';

const props = withDefaults(defineProps<LeftMenuProps>(), {
  data: () => []
});

const activeItem = ref<MenuType>(null);

type MenuType = AppGroupRecord & {
  actived?: boolean;
};

interface LeftMenuProps {
  data?: MenuType[];
}

watch(
  () => props.data,
  data => {
    if (data.length) {
      activeItem.value = data[0];
      data.forEach(item => {
        item.actived = false;
      });
      data[0].actived = true;
    }
  }
);
function handleClick(item: MenuType) {
  activeItem.value = item;
  props.data.forEach(_item => {
    _item.actived = false;
  });
  item.actived = true;

  const target = document.getElementById(item.id);
  if (target) {
    target.scrollIntoView({ behavior: 'smooth' });
  }
}
</script>

<style lang="less" scoped>
.appCenter-aside {
  background: #fff;
  padding: 17px 12px;
  box-sizing: border-box;
  text-align: center;
  color: #818999;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-right: 1px solid #f0f0f0;
  font-size: 14px;
  display: inline-block;
  width: 185px;
  height: 100%;
  position: fixed;

  &__item {
    height: 40px;
    line-height: 40px;
    border-radius: 12px;
    cursor: pointer;

    &:hover {
      background-color: #fafafc;
    }
  }

  &__item--active {
    background: #f2faff;
    color: #0095ff;
  }
}
</style>
